<script setup>
import { onMounted, reactive, ref,watch } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts'


const echartBar = ref();
let options = reactive([])
const currentYearIndex = ref(0); // 当前年份索引
function chartInit() {
    //图表
    const myChart = echarts.init(echartBar.value, "light", {
        width: 400,
        height:400
    });
    // 获取当前年份数据
    const currentYearData = options[currentYearIndex.value];
    var option = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
            name:'报考人数',
            type: 'gauge',
            min: -8,  // 最小值
            max: 25,  // 最大值 (根据实际数据调整)
            textStyle:{
                color:'aqua'
            },
            progress: {
                show: true,
                width: 18,  // 进度条的宽度
            },
            pointer: {
                length: '80%',  // 指针的长度
                width: 5,  // 指针的宽度
                color: 'auto',  // 自动根据进度设置颜色
            },
            axisLine: {  // 设置刻度的颜色
                lineStyle: {
                    width: 15,
                    color: [[0.2, '#3D64FF'], [0.8, '#853EF5'], [1, '#16FFEF']]  // 低、中、高进度的颜色
                }
            },
            splitLine: {  // 刻度线的设置
                length: 20,
                lineStyle: {
                    width: 2,
                    color: 'aqua'
                }
            },
            axisTick: {  // 刻度标记
                length: 10,
                lineStyle: {
                    color: 'aqua'
                }
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: 'aqua'  // 数字颜色
            },
            data: [{
                value: Number(currentYearData.growthRate),  // 将 applicantsNumber 转为数字类型
                name: currentYearData.year
            }],
            axisLabel: { color: 'white', // 刻度数字的颜色 
            fontSize: 10 // 刻度数字的大小（可根据需要调整） 
            }
        }]
    }
    //图表与数据项的绑定
    myChart.setOption(option);
}

function getData() {
    //获取服务器数据
    axios.get('/Pro-Postgraduate/queryApplication')
        .then((response) => {
            console.log("********")
            //if (response.data.code == 200) {
                console.log(response.data)
                options = response.data;
                chartInit();
            //}
        })
        .catch(error => {
            console.error("获取数据失败:", error);
        });
}
// 切换到下一个年份的函数
function nextYear() {
    currentYearIndex.value = (currentYearIndex.value + 1) % options.length;
   // chartInit();
}
// 监听 currentYearIndex 的变化来更新图表
watch(currentYearIndex, () => {
    chartInit();
});

onMounted(() => {
    getData();
})
</script>

<template>
    <div>
        <dv-decoration-7 style="width:280px;height:30px;color: azure;position: fixed;right:2%">2005-2024年每年报名增长率</dv-decoration-7>
        <div ref="echartBar" style="width: 90%;height: 300px;width: 200px;position: fixed;top:70%;right:9%"></div>
        <button @click="nextYear" style="position: fixed;right: 9%;bottom: 7%;">下一年</button>
    </div>
</template>

<style lang="css" scoped></style>